<template>
  <div id="app" :style="{ paddingBottom: currentMusic ? '120px' : '' }">
    <nav>
      <tab-nav v-if="!$route.meta.hideNav"></tab-nav>
    </nav>

    <transition enter-active-class="animate__animated animate__fadeInLeft">
      <router-view
        @play="play"
        :currentMusic="currentMusic"
        :playlist="playlist"
      ></router-view>
    </transition>
    <div class="musicplay" v-show="currentMusic"></div>
    <music-play
      :currentMusic="currentMusic"
      :playlist="playlist"
      @play="play"
    ></music-play>
  </div>
</template>
<script>
import MusicPlay from "./components/MusicPlay.vue";
import TabNav from "./components/TabNav.vue";
import _ from "lodash";
export default {
  data() {
    return {
      currentMusic: null,
      playlist: [],
    };
  },
  components: {
    TabNav,
    MusicPlay,
  },
  methods: {
    play(musiclist) {
      this.currentMusic = musiclist;
      this.playlist.push(musiclist);
      this.playlist = _.uniq(this.playlist);
    },
  },
};
</script>

<style lang="scss">
#app {
  background-color: #fcfcfd;
  width: 100%;
  color: #333;
  .musicplay {
    height: 70px;
  }
}
</style>
